<template>
	<div style="width: 1022px; margin: 0 auto">
		<div class="ddzx">
			<div class="left">
				<p>订单管理</p>
				<p>机票管理</p>
			</div>
			<div class="right">
				<div class="right-top">
					<p>订单查询</p>
					<el-form
						:model="ruleForm"
						:rules="rules"
						ref="ruleForm"
						label-width="100px"
						inline
						class="demo-ruleForm"
					>
						<el-form-item label="订票日期">
							<el-date-picker
								v-model="ruleForm.createTime"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
								size="mini"
							>
							</el-date-picker>
						</el-form-item>

						<el-form-item label="航班日期">
							<el-date-picker
								v-model="ruleForm.startTime"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
								size="mini"
							>
							</el-date-picker>
						</el-form-item>

						<el-form-item label="行程">
							<el-input
								size="mini"
								v-model="ruleForm.startCity"
								placeholder="出发城市"
								style="width: 220px"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-location-outline"
									style="font-size: 17px; line-height: 0"
								></i>
							</el-input>
						</el-form-item>
						<el-form-item label="">
							<el-input
								size="mini"
								v-model="ruleForm.reachCity"
								placeholder="抵达城市"
								style="width: 220px"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-location-outline"
									style="font-size: 17px; line-height: 0"
								></i>
							</el-input>
						</el-form-item>
						<!-- <el-form-item label="座位类型">
							<el-select
								v-model="ruleForm.seatType"
								size="mini"
							>
								<el-option
									label="经济舱"
									value="1"
								></el-option>
								<el-option
									label="商务舱"
									value="2"
								></el-option>
							</el-select>
						</el-form-item> -->
						<el-button
							type="primary"
							@click="findByOperateId"
						>查询</el-button>
					</el-form>
				</div>
				<div class="ddxx">
					<p>机票订单</p>
					<div class="pcxq">
						<el-table
							:data="airOrder"
							height="250"
							v-loading="loading"
							style="width: 100%;marginTop:20px"
						>
							<!-- <el-table-column
								label="#"
								type="index"
								width="50"
							>
							</el-table-column> -->
							<el-table-column
								prop="aircraftInfo.aircraftSequence"
								label="航班序列号"
								width="180"
							>
							</el-table-column>

							<el-table-column
								label="航班详情"
								width="180px"
							>
								<template slot-scope="scope">
									<el-popover
										placement="right"
										trigger="click"
									>
										<el-timeline>
											<el-timeline-item>
												<el-card>
													<h4>
														出发地：{{scope.row.aircraftInfo.startCity+":"+scope.row.aircraftInfo.startAirport}}
													</h4>
													<h5>
														出发时间：{{scope.row.aircraftInfo.startTime}}
													</h5>
												</el-card>
											</el-timeline-item>
											<el-timeline-item>
												<el-card>
													<h4>
														到达地：{{scope.row.aircraftInfo.reachCity+":"+scope.row.aircraftInfo.reachAirport}}
													</h4>
													<h5>
														到达时间：{{scope.row.aircraftInfo.reachTime}}
													</h5>
												</el-card>
											</el-timeline-item>
										</el-timeline>
										<el-button slot="reference">查看详情</el-button>
									</el-popover>
								</template>
							</el-table-column>

							<el-table-column
								prop="ticketInfo.seatType"
								label="座位类型"
								width="180"
								:filters="[{ text: '经济舱', value: '1' }, { text: '商务舱', value: '2' }]"
								:filter-method="filterTag"
								filter-placement="bottom-end"
							>
								<template slot-scope="scope">
									<el-tag
										disable-transitions
										v-if="scope.row.ticketInfo.seatType === 1"
									>
										经济舱
									</el-tag>
									<el-tag v-else>
										商务舱
									</el-tag>
								</template>
							</el-table-column>

							<el-table-column
								label="机票价格"
								width="170"
							>
								<template slot-scope="scope">
									{{scope.row.ticketInfo.price}}￥
								</template>
							</el-table-column>
							<el-table-column
								label="购买时间"
								width="170"
								prop="ticketInfo.createTime"
							>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				airOrder: [{}],
				ruleForm: {
					createTime: null,
					startTime: null,
					startCity: null,
					reachCity: null,
				},
				loading: false,
			};
		},
		methods: {

			findByOperateId() {
				this.loading = true;
				let operateUsers = null;
				var strcookie = document.cookie;//获取cookie字符串
				var arrcookie = strcookie.split("; ");//分割
				//遍历匹配
				for (var i = 0; i < arrcookie.length; i++) {
					var arr = arrcookie[i].split("=");
					if (arr[0] == 'operateUsers') {
						operateUsers = JSON.parse(arr[1]);
					}
				}
				this.$http.post("http://localhost/api/core/ticketInfo/listAll/" + operateUsers.id, this.ruleForm).then(res => {
					if (res.data.data.list[0].aircraftInfo != null) {
						this.airOrder = res.data.data.list;
					} else {
						this.airOrder = null;
					}
				});
				this.loading = false;
			},
			filterTag(value, row) {
				return row.ticketInfo.seatType == value;
			},
		},
		created() {
			this.findByOperateId();
		}
	};
</script>

<style scoped>
	.ddzx {
		width: 100%;
		display: flex;
		margin: 10px 0;
	}

	.left {
		width: 140px;
		height: 80px;
		color: #fff;
		border: 1px #ccc solid;
	}

	.left p:nth-of-type(1) {
		background: red;
		padding: 8px;
		padding-left: 20px;
	}

	.left p:nth-of-type(2) {
		color: #999;
		border-left: 4px red solid;
		font-size: 12px;
		margin: 15px 0;
		margin-left: 10px;
		padding-left: 10px;
	}

	.right {
		width: calc(100% - 140px);
		margin-left: 10px;
	}

	.right-top {
		border: 1px #ccc solid;
	}

	.right-top > p,
	.ddxx > p {
		background: #ccc;
		font-size: 16px;
		color: red;
		padding: 10px;
	}

	.ddxx {
		margin: 10px 0;
	}

	.pcxq {
		margin: 20px auto;
	}
</style>
